<template>
	<div class="" v-if="Object.keys(data).length>0">
		<view class="result" style="padding-top: 20rpx;padding-bottom: 30rpx;">
			<!-- <view class="title"> 请查收您的专属报告 </view>
					<view class="line"> </view> -->
			<scroll-view class="scroller-content" @scrolltolower="scrollInfo" scroll-y>
				<view class="content" style="margin: 20rpx auto;">
					<view class="text_content">
						<view class="first">
							<view class="" style="display: flex;align-items: center;">
								<view class="left">
									<image :src="tou" class="avatar"></image>
								</view>

								<view class="middle">
									<view class="right_first_line">
										<!-- 名称 -->
										<view class="name">
											{{ data.name }}
										</view>
										<!-- 教育 -->
										<!-- <view class="education">
										教育年限：{{ data.eduTotal }}年
									</view> -->
									</view>
								</view>
							</view>

							<view class="right">
								<!--  -->
								<view class="right_two_line">
									<view class="top">
										<view class="education">
											|&nbsp;&nbsp;&nbsp;{{ data.gender }}
										</view>
										<view class="education">
											|&nbsp;&nbsp;&nbsp;{{ data.age }}岁
										</view>
									</view>

									<view class="education">
										{{ data.reportDate }}
									</view>
								</view>
							</view>

						</view>

						<!-- <view class="test_number" style="margin-bottom:0px;">
							<view class="education"> 编号：{{ data.reportNo }} </view>
							<view class="education">
								主试人：{{ data.doctorName }}
							</view>
						</view> -->
					</view>
				</view>
				<!-- <view v-show="showSuggest" class="content" style="margin: 20rpx auto"> -->
				<!-- 					<view style="text-align: center;"><text style="font-size: 30rpx;">是否愿意把本小程序推荐给朋友 ？</text></view>
				<view style="text-align: center;">
					<view style="margin: 20rpx auto;margin-left: -20rpx;display: inline-block;"><button
							class="buttonClass"
							style="height: 50rpx; width: 230rpx;color: #004751;background-color: #66ffb5;font-size: 25rpx;font-weight: bold;"
							@click="showInfo(true)">是</button>
					</view>
					<view style="margin: 20rpx auto; margin-left: 30rpx; display: inline-block;"><button
							class="buttonClass"
							style="height: 50rpx; width: 230rpx; color: #66ffb5;background-color: #004751;font-size: 25rpx;font-weight: bold;"
							@click="showInfo(false)">否</button></view>
				</view> -->
				<!-- <view v-show="showSuggest" class="info-center">
					<text>\n</text>
					<view style="text-align: center;"><text style="font-size: 37rpx;">是否愿意把本小程序推荐给朋友 ？</text></view>
					<view style="text-align: center;">
						<view style="margin: 20rpx auto;display: inline-block;"><button class="buttonClass"
								style="height: 60rpx; width: 240rpx;color: #004751;background-color: #66ffb5;font-size: 29rpx;font-weight: bold;"
								@click="showInfo(true)">是</button>
						</view>
						<view style="margin: 20rpx auto;display: inline-block;margin-left: 20rpx;"><button
								class="buttonClass"
								style="height: 60rpx; width: 240rpx; color: #66ffb5;background-color: #004751;font-size: 29rpx;font-weight: bold;"
								@click="showInfo(false)">否</button></view>
					</view>
				</view> -->
				<view class="content">
					<view class="text_content">

						<view class="" style="display: flex;align-items: center;justify-content: space-between;">
							<view class="header_title">
								<img src="/static/img/first2.png" alt="" style="" />
								<text style="color: #5978B5;font-size: 22px;" class="text">总体评价</text>
							</view>
							<view>
								<view class="status" style="color: #54C300" v-if="data.assessResult==1">
									脑功能正常
								</view>
								<view class="status" style="color: #DEBC00" v-else-if="data.assessResult==2">
									脑功能下降
								</view>
								<view class="status" style="color:#DE0000;" v-else> 脑功能损伤 </view>
							</view>
						</view>
						<!-- <u-line dashed></u-line> -->
						<view class="zhushi risk" style="margin-bottom: 40rpx; margin-top: 16rpx"
							v-if="data.assessResult==1&&data.detailContents[0].result=='正常'">
							<image src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/normal.png"
								mode="widthFix" style="width: 300px;margin-bottom: 30rpx;"></image>
							<text>结果解释：您本次测评结果显示为脑功能正常，说明您尚不存在患有认知障碍的风险。</text>
						</view>
						<view class="zhushi risk" style="margin-bottom: 40rpx; margin-top: 16rpx"
							v-else-if="data.assessResult==1&&data.detailContents[0].result=='异常'">
							<image src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/normal.png"
								mode="widthFix" style="width: 300px;margin-bottom: 30rpx;"></image>
							<text>结果解释：您本次测评结果显示为脑功能功能基本正常，但存在主观认知下降。</text>
						</view>
						<view class="zhushi risk" style="margin-bottom: 40rpx; margin-top: 16rpx"
							v-else-if="data.assessResult==2">
							<image
								src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/descend.png"
								mode="widthFix" style="width: 300px;margin-bottom: 30rpx;"></image>
							<text>结果解释：您本次测评结果显示为脑功能下降，说明您存在患有认知障碍的风险。</text>
						</view>
						<view class="zhushi risk" style="margin-bottom: 40rpx; margin-top: 16rpx" v-else>
							<image src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/harm.png"
								mode="widthFix" style="width: 300px;margin-bottom: 30rpx;"></image>
							<text>结果解释：您本次测评结果显示为脑功能损伤，说明您存在患有认知障碍的风险。</text>
						</view>
					</view>
				</view>

				<view class="content">
					<view class="text_content">

						<view class="" style="display: flex;align-items: center;justify-content: space-between;">
							<view class="header_title">
								<img src="/static/img/four2.png" alt="" style="" />
								<text style="color: #5978B5;font-size: 22px;" class="text">潜在风险</text>
							</view>
							<view>
								<view class="status" style="color: #54C300"
									v-if="96<= data.brainHealthIndex && data.brainHealthIndex < 101">
									暂无
								</view>
								<view class="status" style="color: #A3C300"
									v-else-if="86<= data.brainHealthIndex && data.brainHealthIndex < 96">
									较低
								</view>
								<view class="status" style="color: #DEBC00"
									v-else-if="61<= data.brainHealthIndex && data.brainHealthIndex < 86">
									中
								</view>
								<view class="status" style="color: #DE7200"
									v-else-if="21<= data.brainHealthIndex && data.brainHealthIndex < 61">
									较高
								</view>
								<view class="status" style="color: #DE0000;" v-else> 高 </view>
							</view>
						</view>

						<!-- <u-line dashed></u-line> -->
						<view class="zhushi risk" style="margin-bottom: 40rpx; margin-top: 50rpx"
							v-if="96<= data.brainHealthIndex && data.brainHealthIndex < 101">

							<image style="width: 556rpx;margin-bottom: 50rpx;"
								src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/oneStar.png"
								mode="widthFix"></image>
							<view><text>您的脑健康状态非常好，需要注意保持长期观察，建议每隔30天进行脑健康复查，并通过训练保持状态</text></view>
						</view>
						<view class="zhushi risk" style="margin-bottom: 40rpx; margin-top: 50rpx"
							v-else-if="86<= data.brainHealthIndex && data.brainHealthIndex < 96">
							<image style="width: 556rpx;margin-bottom: 50rpx;"
								src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/twoStar.png"
								mode="widthFix"></image>
							<view><text>您的脑健康状态良好，需要长期坚持脑部训练才能保持状态，建议通过训练可以保持状态稳定、避免记忆力、判断力、语言能力出现衰退</text></view>
						</view>
						<view class="zhushi risk" style="margin-bottom: 40rpx; margin-top: 50rpx"
							v-else-if="61<= data.brainHealthIndex && data.brainHealthIndex < 86">
							<image style="width: 556rpx;margin-bottom: 50rpx;"
								src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/threeStar.png"
								mode="widthFix"></image>
							<view>
								<text>您的脑健康状态属于中等水平，长期的大脑健康训练对您是有必要的，您可能会出现记忆减退，判断能力下降、语言能力受损等情况，建议通过训练恢复您的记忆力、判断力等大脑基础能力</text>
							</view>
						</view>
						<view class="zhushi risk" style="margin-bottom: 40rpx; margin-top: 50rpx"
							v-else-if="21<= data.brainHealthIndex && data.brainHealthIndex < 61">
							<image style="width: 556rpx;margin-bottom: 50rpx;"
								src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/fourStar.png"
								mode="widthFix"></image>
							<view><text
									style="color: #DE7200;">您的脑健康状态持续下降，如果不及时进行康复训练，将会出现记忆严重受损、语言能力、视觉能力下降等，建议通过训练来改善您的脑健康状态</text>
							</view>
						</view>
						<view class="zhushi risk" style="margin-bottom: 40rpx; margin-top: 50rpx" v-else>
							<image style="width: 556rpx;margin-bottom: 50rpx;"
								src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/fiveStar.png"
								mode="widthFix"></image>
							<view><text
									style="color: #DE0000;">您的脑健康状态已处于严重退化阶段，如果不及时进行康复训练，会逐渐丧失语言和活动能力，请您及时到医院就诊，遵照医嘱进行治疗</text>
							</view>
						</view>
					</view>
				</view>

				<view class="content">
					<view class="text_content" style="margin-bottom: 0;">
						<!-- <u-line dashed></u-line> -->
						<!-- <u-line dashed></u-line> -->
						<view class="" style="display: flex;align-items: center;justify-content: space-between;">
							<view class="header_title">
								<img src="/static/img/secend2.png" alt="" style="" />
								<text style="color: #5978B5;font-size: 22px;" class="text">脑健康指数</text>
							</view>
							<view class="source">
								<text class="source_number"
									:style="{color:scoreColor(data.score)}">{{ data.score }}</text>
								<text class="fen" :style="{color:scoreColor(data.score)}">分</text>
							</view>
						</view>
						<!-- 进度条外层 -->
						<view class="progress">
							<u-line-progress :percentage="data.score" :showText="false" :activeColor="scoreColor(data.score)">
							</u-line-progress>
							<img src="./kedu.png" alt=""
								style="width: 485rpx;height: 12rpx;margin: auto;position: relative;top: -34rpx;right: -60rpx;">
							<view class="shuzi" style="margin-top: -36rpx;">
								<view class=""> 0 </view>
								<view class=""> 10 </view>
								<view class=""> 20 </view>
								<view class=""> 30 </view>
								<view class=""> 40 </view>
								<view class=""> 50 </view>
								<view class=""> 60 </view>
								<view class=""> 70 </view>
								<view class=""> 80 </view>
								<view class=""> 90 </view>
								<view class=""> 100 </view>
							</view>
						</view>
						<view class="zhushi" style="padding-bottom: 40rpx; padding-top: 70rpx;font-size: 30rpx;">
							脑健康指数越高，表明您的脑健康状况越好
						</view>
					</view>
				</view>

				<!-- <view class="" style="height: 100%;"> -->
					<view class="remi" style="text-align: center;" v-if="0<= data.brainHealthIndex && data.brainHealthIndex < 86">
						<image @longpress="longtap" :show-menu-by-longpress="true"
							src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/1-1.png" mode="widthFix"></image>
						<image @longpress="longtap" :show-menu-by-longpress="true"
							src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/1-2.png" mode="widthFix"></image>
						<image @longpress="longtap" :show-menu-by-longpress="true"
							src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/1-3.png" mode="widthFix"></image>
					</view>
					<view class="remi" style="text-align: center;" v-else>
						<image @longpress="longtap" :show-menu-by-longpress="true"
							src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/2-1.png" mode="widthFix"></image>
							<image @longpress="longtap" :show-menu-by-longpress="true"
							src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/1-2.png" mode="widthFix"></image>
						<image @longpress="longtap" :show-menu-by-longpress="true"
							src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/1-3.png" mode="widthFix"></image>
					</view>
				<!-- </view> -->

				<view class="content">
					<view class="text_content" style="padding-bottom: 30rpx; margin-top: 20rpx;padding-left: 30rpx;">
						<!-- <u-line dashed></u-line> -->
						<!-- <u-line dashed></u-line> -->
						<view class="header_title">
							<img src="/static/img/five2.png" alt="" style="" />
							<text style="color: #5978B5;font-size: 22px;" class="text">脑健康指导建议</text>
						</view>
						<view class="zhushi " style="font-size: ;">
							<u-parse :content="
					        data.adviceContents[0] ? data.adviceContents[0].content : ''
					      "></u-parse>
						</view>
						<view class="zhushi_hui" style="
					      margin-top: 40rpx;
					      color: #a1b0b3;
					      font-size: 20rpx;
					      height: 66rpx;
					      line-height: 36rpx;
					    ">
							<u-parse :content="data.noticeText"></u-parse>
						</view>

						<!-- 	<view class="" style="margin-top: 60rpx">
									<u-line dashed></u-line>
								</view> -->

						<!-- 	<view class="header_title">
									<img src="/static/img/five.png" alt="" style="" />
									<text style="" class="text">领取电子报告</text>
								</view>
								<view class="bottom">
									<view class="zhushi text">
										<view class="">
											关注公众号获取
											<br />
											详细的筛查报告及专业的健康建议
										</view>
									</view>
									<view class="imgage">
										<img src="/static/personal/ainao.jpg" alt="" style="width: 100%; height: 100%" />
									</view>
								</view> -->
					</view>
				</view>

				<!-- <view class="content" >
					<image  src="../../../static/index/code.png" mode="widthFix"></image>
					</view> -->
				<!-- </view> -->
			</scroll-view>
			<!-- <view class="helthSuggest">
				<view class="helthSuggest_left">
					<view class="thelthSuggest_left_text">
						点击查看健康建议
					</view>
					<view class="helthSuggest_left_btn" @click="receiveSuggest">
						立即查看
					</view>
				</view>
				<view class="helthSuggest_right">
					<img src="./rightimg.png" alt="" style="height: 100%;width: 100%;">
				</view>

			</view> -->
			<!-- <view class="fixed_bottom_box">
				<view class="bottom_first">
					<view class="left">
						<img src="./leftjian.png" alt="">
					</view>
					<view class="fixed_bottom_box_title">
						分享测评给身边的朋友
						共同预防脑认知疾病
					</view>
					<view class="right">
						<img src="./rightjian.png" alt="">
					</view>
				</view>
				<view class="btns">
					<button open-type="share">
						<view class="btns_left">
							<u-icon name="weixin-fill" size="28"></u-icon>
							微信好友
						</view>
					</button>
					<view class="btns_right" @click="genraterImage"> 生成图片转发 </view>
				</view>
			</view> -->
		</view>
		<!-- <view class="title" v-else style="margin-top: 200rpx;">
			<u-empty text="暂无测评结果，请前往首页进入测评页面"
				icon="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/permotionManger/empty.png">
			</u-empty>
		</view> -->
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import res from "./res.json";
	import {
		getReport,
		getCamplog,
		updateUserInfo
	} from '@/api/api.js'
	export default {
		data() {
			return {
				data: {},
				patientId: '',
				token2: '',
				showSuggest: true,
				hadSuggest: false,
				color: 'color:green'
			};
		},
		computed: {
			...mapState({
				token: (state) => state.token,
				avatar: (state) => state.userInfo.avatarUrl,
				nickName: (state) => state.userInfo.nickName,
			}),
			tou() {
				return this.avatar ?
					this.avatar :
					"https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/morenAv.png";
			},
		},
		methods: {
			// longtap(){
			// 	console.log('长按保存图片');
			// 	let token = uni.getStorageSync('token')
			// 	console.log('token',token)

			// },
			longtap() {
				console.log('长按图片')
				getCamplog().then(res => {
					console.log('返回', res)
					// const {
					// 	data
					// } = res
					// this.data = data.data || {}
					// this.data.assessResult = 2
					// this.data.detailContents[0].result = '异常'
					// this.data = {}
					// console.log('data,', data)
				})
			},

			scoreColor(score) {
				const colorList = ['#DE0000', '#DE7200', '#DEBC00', '#A3C300', '#54C300', 'red'] // 颜色数组
				if (0 <= score && score < 21) {
					return '#DE0000'
				} else if (21 <= score && score < 61) {
					return '#DE7200'
				} else if (61 <= score && score < 86) {
					return '#DEBC00'
				} else if (86 <= score && score < 96) {
					return '#A3C300'
				} else if (96 <= score && score < 101) {
					return '#54C300'
				}
			},
			scrollInfo() {
				if (!this.hadSuggest) {
					this.showSuggest = true;
				}
			},
			showInfo(param) {
				var isSuggest = 0;
				if (param == true) {
					this.showSuggest = false;
					this.hadSuggest = true;
					isSuggest = 1;

				} else {
					this.showSuggest = false;
					this.hadSuggest = true;
					isSuggest = 0;
				}
				updateUserInfo({
					isSuggest: isSuggest,
				}).then(res => {
					wx.showToast({
						title: '谢谢您的建议，我们会持续优化我们的筛查程序！',
						icon: 'none',
						duration: 2000
					});
				})
			},
			receiveSuggest() {
				uni.navigateTo({
					url: `/pages/middleScreening/healthAdvice/healthAdvice`,
				});
			},
			genraterImage() {
				// 跳转到webview 加载图片生成网页
				const url = `https://www.ainaoxingdong.com/html_img/index.html#/?query=${JSON.stringify({
					token:this.token,
					avatar:this.avatar,
					type:'0',
				})}`
				// const url = `http://localhost:8080/#/?query=${JSON.stringify({
				// 	token:this.token,
				// 	avatar:this.avatar,
				// 	type:'0',
				// })}`
				console.log("生成图片连接" + url);
				uni.navigateTo({
					url: `/pages/middleScreening/webview/webview?url=${encodeURIComponent(url)}`,
				});
			},
			report(params = {}) {
				getReport(params).then(res => {
					console.log('res,,', res)
					const {
						data
					} = res
					this.data = data.data || {}
					// this.data.assessResult = 2
					// this.data.detailContents[0].result = '异常'
					// this.data = {}
					console.log('data,', data)
				})
			},

		},
		mounted() {
			// console.log(res, "resresresresresresres");
			// const data = res.data;
			// this.data = data.data;
			this.showSuggest = false;
		},
		onLoad(option) {
			console.log(option, 'optionoption')
			if (option.patientId) {
				this.patientId = option.patientId
			}
			if (option.token) {
				this.token2 = option.token
			}
			// console.log(this.token2 , this.patientId)
			if (this.token2 && this.patientId) {
				this.report({
					js_patientId: this.patientId,
					js_token: this.token2
				})
			} else {
				// console.log('123123456789')
				this.report()
			}
			uni.$u.mpShare = {
				title: "【爱脑行动】认知风险筛查", // 默认为小程序名称，可自定义
				path: "/pages/index/index", // 默认为当前页面路径，一般无需修改，QQ小程序不支持
				// 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
				// 支持PNG及JPG，默认为当前页面的截图
				imageUrl: "/static/logo.png",
			};
		},
		// onUnload() {
		// 	uni.switchTab({
		// 		url: "/pages/index/index",
		// 	});
		// },
	};
</script>

<style lang="scss">
	.info-center {
		box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		position: fixed;
		z-index: 999;
		background-color: #D8FEEE;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		border-radius: 10rpx;
		width: 80%;
		height: 220rpx;
		margin-left: 10%;
		margin-right: 10%;
	}

	.buttonClass {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	button::after {
		border: none;
	}

	button {
		background-color: #fff;
		margin: 0;
		padding: 0;
	}

	page {
		// padding-bottom: 264rpx;
	}

	.helthSuggest {
		width: 670rpx;
		height: 222rpx;
		background: #66FFB5;
		box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		margin: auto;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 40rpx 30rpx;
		display: flex;

		.helthSuggest_left {
			flex: 1;

			.thelthSuggest_left_text {
				// width: 256rpx;
				height: 44rpx;
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 550;
				color: #003941;
				line-height: 44rpx;

			}

			.helthSuggest_left_btn {
				width: 232rpx;
				height: 72rpx;
				background: #004751;
				box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
				border-radius: 20rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 550;
				color: #66FFB5;
				line-height: 72rpx;
				margin-top: 26rpx;
			}
		}

		.helthSuggest_right {
			width: 220rpx;
			height: 136rpx;
		}
	}

	.fixed_bottom_box {
		width: 100vw;
		height: 264rpx;

		.bottom_first {
			width: 100%;
			display: flex;
			margin-top: 60rpx;

			.left {
				flex: 1;
				text-align: right;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				img {
					width: 78rpx;
					height: 48rpx;
				}
			}

			.right {
				flex: 1;
				text-align: left;
				display: flex;
				align-items: center;

				img {
					width: 78rpx;
					height: 48rpx;
				}
			}

			.fixed_bottom_box_title {
				width: 320rpx;
				// height: 48rpx;
				line-height: 48rpx;
				// padding-top: 40rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 550;
				color: #003941;
				line-height: 48rpx;
			}
		}


		.btns {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-around;
		}

		.btns_left {
			width: 150px;
			height: 48px;
			background: #66ffb5;
			box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #003941;
		}

		.btns_right {
			width: 150px;
			height: 48px;
			background: #004751;
			box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
			border-radius: 10px;
			font-size: 16px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #66ffb5;
			line-height: 48px;
			text-align: center;
		}
	}

	.zhushi_hui {
		width: 305px;
		height: 33px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #a1b0b3;
		line-height: 14px;
		text-align: center;
	}

	.header_title {
		margin: 30rpx 0;

		img {
			width: 42rpx;
			height: 42rpx;
			position: relative;
			top: 5rpx;
		}

		.text {
			height: 48rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #003941;
			line-height: 48rpx;
			margin-left: 10rpx;
		}
	}

	.status {
		height: 48rpx;
		font-size: 22px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #d96c36;
		line-height: 48rpx;
	}

	.zhushi {
		font-size: 33rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		// color: #336c74;
		// color: #B5C3E0;
		color: #5978B5;
		line-height: 48rpx;
	}

	.source {
		.source_number {
			height: 48rpx;
			font-size: 40rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			// color: #003941;
			line-height: 48rpx;
		}

		.fen {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #336c74;
			line-height: 34rpx;
		}
	}

	.progress {
		margin-top: 5px;
		width: 100%;
		height: 28rpx;

		// border-radius: 14rpx;
		// background: linear-gradient(270deg, #00CC6A 0%, #F2A247 100%);
		// opacity: 0.2;
		.u-line-progress__line {
			// background: linear-gradient(270deg, #1bcc00 0%, #ffc400 50%, #ff0500 100%);
			// background: linear-gradient(270deg, #00cc6a 0%, #f2a247 100%);
		}

		.u-line-progress__background {
			// background-color: #cff5e1;
		}

		.shuzi {
			display: flex;
			justify-content: space-around;
			padding-top: 8rpx;

			view {
				text-align: center;
				padding: 0 22rpx;
				flex: 1;
				width: 22rpx;
				height: 22rpx;
				font-size: 16rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #b8c0cc;
				line-height: 22rpx;
			}
		}
	}

	.box_1 {
		.algin {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;
			width: 100%;
		}

		.heiti {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 550;
			color: #004751;
			line-height: 34rpx;
		}

		.text {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;

			line-height: 34rpx;
		}
	}

	.box_2 {
		margin-top: 30rpx;

		.box_title {}
	}

	.bottom {
		display: flex;
		align-items: center;

		.text {
			flex: 1;
		}

		.imgage {
			width: 168rpx;
			height: 168rpx;
			background-color: hotpink;
		}
	}

	.scroller-content {
		width: 100%;
		height: calc(100vh - var(--window-top)); //calc()是动态计算函数
		//100vh:把屏幕高度分成100等份
		//--window-top屏幕顶部栏目部分
	}

	.result {
		// background: linear-gradient(180deg, #00cc6a 0%, #d8feeb 30%);
		background-color: #EBF3FF;
		width: 100%;
		height: 100%;
		position: relative;

		.title {
			width: 180px;
			height: 30px;
			font-size: 20px;
			font-family: FZLTDHJW--GB1-0, FZLTDHJW--GB1;
			font-weight: normal;
			color: #ffffff;
			line-height: 30px;
			padding-left: 70rpx;
			padding-top: 40rpx;
		}

		.line {
			width: 690rpx;
			height: 20rpx;
			background: #336c74;
			border-radius: 20rpx;
			margin: auto;
			margin-top: 20rpx;
			z-index: 1;
			position: relative;
			opacity: 0.5;
			bottom: -10rpx;
		}

		.content {
			width: 670rpx;
			background: #ffffff;
			box-shadow: 0px 6px 16px 0px rgba(75, 126, 139, 0.1);
			margin: auto;
			z-index: 44;
			position: relative;
			opacity: 1;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.text_content {
				padding: 5rpx 30rpx;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: column;

				.education {
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					// color: #336c74;
					color: #B5C3E0;
					line-height: 34rpx;
				}

				.first {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 184rpx;

					.left {
						width: 122rpx;
						height: 122rpx;
						border-radius: 50%;
						border: 2px solid #E7EFFF;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.middle {
						margin-left: 34rpx;

						.right_first_line {
							// display: flex;
							// width: 100%;
							// justify-content: space-between;

							.name {
								height: 48rpx;
								font-size: 32rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 900;
								// color: #003941;
								color: rgba(85, 153, 255, 1);
								// line-height: 48rpx;
							}

							.education {
								line-height: 48rpx;
							}
						}
					}

					.right {
						// flex: 1;
						padding-left: 30rpx;
						height: 90rpx;
						display: flex;
						justify-content: space-between;


						.right_two_line {
							display: flex;
							flex-direction: column;
							width: 100%;
							align-items: flex-end;
							justify-content: space-between;

							.top {
								width: 150rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
							}
						}
					}
				}

				.test_number {
					display: flex;
					width: 100%;
					justify-content: space-between;
					margin-top: 40rpx;
					margin-bottom: 30rpx;
				}
			}
		}
	}

	.result222 {
		background: linear-gradient(180deg, #00cc6a 0%, #d8feeb 100%);
		width: 100%;
		position: relative;
		position: absolute;
		top: -99999px;
		left: -9999px;
		padding-top: 40rpx;

		.content222 {
			width: 670rpx;
			// height: 3288rpx;
			background: #ffffff;
			box-shadow: 0px 6px 16px 0px rgba(75, 126, 139, 0.1);
			margin: auto;
			// padding-top: -5px;
			z-index: 44;
			position: relative;
			opacity: 1;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			position: relative;
		}
	}

	.risk {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	// .remi{
	// 	background-color: white;
	// 	width: 670rpx;
	// 	margin: auto;
	// 	padding: 0;
	// }
	.remi image {
		display: block;
		width: 100%;
		height: 100%;
	}
</style>
